<template>
	<view>
		<ren-calendar ref='ren' :markDays='markDays' :headerBar='true' :collapsible="false"
			@onDayClick='onDayClick' @changeyue="changeyue"></ren-calendar>
		<view class="mainpadding" v-if="clickday">
			<view class="mainpadding titletext xiaohei bold textcenter ffffff radius">
				<text class="margin-right">{{clickday.date}}</text>
				<text>{{clickday.week}}</text>
			</view>
			<view class="mainpadding_top ffffff radius" v-if="clickdayList.length">
				<view class="xiahuaxian " :class="index==0?'':'margin_top'" v-for="(item,index) in clickdayList" :key="item.id">
					<view class=" titletext xiaohei bold" v-if="item.companysetdk.data_type==1">上班打卡</view>
					<view class=" titletext xiaohei bold" v-if="item.companysetdk.data_type==2">下班打卡</view>
					<view class=" titletext xiaohei bold" v-if="item.companysetdk.data_type==3">临时打卡</view>
					<view class="flexbetween margin_top">
						<view class="flexleft">
							<view class="xiaohei bold titletext" style="margin-right: 30rpx;">{{item.companysetdk.dktime}}</view>
							<view class="xiaolv" v-if="item.status==1">
								<view class="ershiba fonweight" v-if="item.companysetdk.data_type==1">上班卡（{{item.createtime_text}}）</view>
								<view class="ershiba fonweight" v-if="item.companysetdk.data_type==2">下班卡（{{item.createtime_text}}）</view>
								<view class="ershiba fonweight" v-if="item.companysetdk.data_type==3">临时卡（{{item.createtime_text}}）</view>
								<view class="smalltext">正常打卡</view>
							</view>
							<view class="xiaohong" v-if="item.status==2">
								<view class="ershiba fonweight" v-if="item.companysetdk.data_type==1">上班卡（{{item.createtime_text}}）</view>
								<view class="ershiba fonweight" v-if="item.companysetdk.data_type==2">下班卡（{{item.createtime_text}}）</view>
								<view class="ershiba fonweight" v-if="item.companysetdk.data_type==3">临时卡（{{item.createtime_text}}）</view>
								<view class="smalltext">迟到打卡</view>
							</view>
							<view class="xiaohui" v-if="item.status==3">
								<view class="ershiba fonweight" v-if="item.companysetdk.data_type==1">上班卡</view>
								<view class="ershiba fonweight" v-if="item.companysetdk.data_type==2">下班卡</view>
								<view class="ershiba fonweight" v-if="item.companysetdk.data_type==3">临时卡</view>
								<view class="smalltext "> <text class="margin_right2">未打卡</text> <text class="xiaolan" @click="jumpdetail('/pages/tab4/kaoqindk/bukasq?id=',item.id)">补卡申请</text></view>
							</view>
							<view class="xiaohong" v-if="item.status==4">
								<view class="ershiba fonweight" v-if="item.companysetdk.data_type==1">上班卡（{{item.createtime_text}}）</view>
								<view class="ershiba fonweight" v-if="item.companysetdk.data_type==2">下班卡（{{item.createtime_text}}）</view>
								<view class="ershiba fonweight" v-if="item.companysetdk.data_type==3">临时卡（{{item.createtime_text}}）</view>
								<view class="smalltext">早退打卡</view>
							</view>
						</view>
						<image v-if="item.dk_avatar_text" :src="item.dk_avatar_text" style="width: 120rpx;height: 120rpx;" class="radius" mode="" @click="lbtpriview(0,[item.dk_avatar_text])"></image>
					</view>
					
				</view>
			</view>
			<view class="mainpadding_top main_size xiaohong bold textcenter ffffff radius" v-else>暂无打卡信息</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				markDays:[],
				currentDate:'',
				clickday:null,
				clickdayList:[],
				bkshow:false,
				currentid:""
			}
		},
		onLoad() {
			let y = new Date().getFullYear() // 年
			let	m = new Date().getMonth() + 1 // 月
			this.currentDate = y+"-"+m
			this.getkqrecode()
		},
		methods: {
			getkqrecode(date) {
				httpRequest.request('/api/Companydk/kqRecod', 'GET', {
					date:this.currentDate
				}).then(res => {
					this.markDays = res.data
				}).catch(err => {})
			},
			changeyue(e){
				this.currentDate = e
				this.getkqrecode()
			},
			onDayClick(e){
				this.clickday = e
				this.getKqDetail()
			},
			getKqDetail(){
				httpRequest.request('/api/Companydk/kqRecodDetail', 'GET', {
					date:this.clickday.date
				}).then(res => {
					this.clickdayList = res.data
				}).catch(err => {})
			},
		}
	}
</script>

<style lang="scss" scoped>
.xiahuaxian:last-child {
		padding-bottom: 0;
		border: none;
	}
</style>
